import React, { Component } from 'react';
import { Card, List, Badge, Flex, Icon, WingBlank,Toast,ActionSheet,Modal } from 'antd-mobile';
import { StarOutlined, WechatFilled,QqCircleFilled,WeiboCircleFilled, QqOutlined,WarningOutlined,StarFilled } from '@ant-design/icons';
import { Link,} from 'react-router-dom'

import { Avatar } from 'antd'
import ContentUserInfo from './contentUserInfo'
import ContentFooter from './contentFooter'
import Zmage from 'react-zmage'
import './index.css'
// 倒序时间
function getDateDiff(dateTimeStamp) {
    var minute = 1000 * 60; //把分，时，天，周，半个月，一个月用毫秒表示
    var hour = minute * 60;
    var day = hour * 24;
    var week = day * 7;
    var halfamonth = day * 15;
    var month = day * 30;
    var year = day * 365;
    var now = new Date().getTime(); //获取当前时间毫秒
    // console.log(now);
    var diffValue = now - dateTimeStamp; //时间差

    if (diffValue < 0) {
        return;
    }
    var minC = diffValue / minute; //计算时间差的分，时，天，周，月
    var hourC = diffValue / hour;
    var dayC = diffValue / day;
    var weekC = diffValue / week;
    var monthC = diffValue / month;
    var yearC = diffValue / year;
    var result;
    if (yearC >= 1) {
        result = " " + parseInt(yearC) + "年前";
    } else if (monthC >= 1 && monthC <= 12) {
        result = " " + parseInt(monthC) + "月前";
    } else if (weekC >= 1 && weekC <= 4) {
        result = " " + parseInt(weekC) + "周前";
    } else if (dayC >= 1 && dayC <= 7) {
        result = " " + parseInt(dayC) + "天前";
    } else if (hourC >= 1 && hourC <= 24) {
        result = " " + parseInt(hourC) + "小时前";
    } else if (minC >= 1 && minC <= 60) {
        result = " " + parseInt(minC) + "分钟前";
    } else if (diffValue >= 0 && diffValue <= minute) {
        result = "刚刚";
    } else {
        var datetime = new Date();
        datetime.setTime(dateTimeStamp);
        var Nyear = datetime.getFullYear();
        var Nmonth =
            datetime.getMonth() + 1 < 10
                ? "0" + (datetime.getMonth() + 1)
                : datetime.getMonth() + 1;
        var Ndate =
            datetime.getDate() < 10
                ? "0" + datetime.getDate()
                : datetime.getDate();
        var Nhour =
            datetime.getHours() < 10
                ? "0" + datetime.getHours()
                : datetime.getHours();
        var Nminute =
            datetime.getMinutes() < 10
                ? "0" + datetime.getMinutes()
                : datetime.getMinutes();
        var Nsecond =
            datetime.getSeconds() < 10
                ? "0" + datetime.getSeconds()
                : datetime.getSeconds();
        result = Nyear + "-" + Nmonth + "-" + Ndate;
    }
    return result;
}

export default class ContentCard extends Component {
    constructor(props) {
        super(props);
        this.state = {
            articleId:null,
            anchorId:null,
            modal2: false,
            collectMsg:'收藏',
            iscollected:false
        };
    }
    showModal = key => (e) => {
        e.preventDefault(); // 修复 Android 上点击穿透
        this.setState({
            [key]: true,
        });
    }
    onClose = key => () => {
        this.setState({
            [key]: false,
        });
    }
    componentDidMount(){
        this.setState({
            articleId: this.props.contentData.articleId,
            anchorId: this.props.contentData.author.anchorId
        })
    }
    collectHandeler =() =>{
        let flag = this.state.iscollected
        if(flag){//已经收藏
            this.setState({
                iscollected: false
            })
            Toast.info('取消收藏', 1.3, () => {
                this.setState({
                    modal2: false
                })
            });
        }else{//未收藏
            this.setState({
                iscollected: true
            })
            Toast.info('收藏成功', 1.3,()=>{
                this.setState({
                    modal2: false
                })
            });
        }
       
       
    }
    render() {
        let contentData = this.props.contentData
        let userData = this.props.contentData.author
        let dateMsg = getDateDiff(contentData.articleTime)
        // console.log(getDateDiff(1587821895744));
        let allState = {
            content:contentData,
            user:userData
        }
        return (
            <div>
                <Card full>
                    <WingBlank>
                        <div className='myCardHeader'>
                            <div style={{ marginRight: '8px' }}><Avatar src={userData.userAvatar} /></div>
                                <ContentUserInfo userData={userData} />
                            <Icon type="ellipsis" onClick={this.showModal('modal2')} />
                        </div>
                    </WingBlank>
                    <Modal
                        popup
                        visible={this.state.modal2}
                        onClose={this.onClose('modal2')}
                        animationType="slide-up"
                        // afterClose={() => { alert('afterClose'); }}
                    >
                    <div className='content-card-modal'>
                        <div className='action-container'>
                        {
                            this.state.iscollected?(
                            <div className='action-item' onClick={this.collectHandeler}>
                                            <StarFilled style={{ fontSize: 33, color:'#f1c40f' }} />已收藏
                            </div>):
                            (<div className='action-item' onClick={this.collectHandeler}>
                                <StarOutlined style={{ fontSize: 33 }} />收藏
                            </div>)
                        }
                                
                                <div className='action-item'>
                                    <QqCircleFilled style={{ fontSize: 33, color:'#1890ff' }} /> QQ
                                </div>
                                <div className='action-item'>
                                    <WechatFilled style={{ fontSize: 33, color:'#27ae60' }} /> 微信
                                </div>
                                <div className='action-item'>
                                    <WeiboCircleFilled style={{ fontSize: 33, color:'#e74c3c' }} /> 微博
                                </div>
                                <div className='action-item'>
                                    <WarningOutlined style={{ fontSize: 33 }} /> 举报
                                </div>
                        </div>
                            <div className='ccm-button-container' onClick={this.onClose('modal2')}>取消</div>
                    </div>
                    </Modal>
                    <Card.Body style={{ }}>
                        <div 
                        style={{ fontWeight: 'bold', fontSize: 17, letterSpacing: '1.6px', color: '#101010' }}>{contentData.articleName}</div>
                        <div className='content-card-mid'>{contentData.articleContent}</div>
                        <Link to={{pathname:'contenthome',state:allState}}>
                            <p style={{ marginTop: '1vh' }}>查看详情</p>
                        </Link>
                        <div className='content-imgs' >
                            {contentData.articleImageUrl1 !== '' ?
                                <div className='content-imgs-item'
                                    onClick={() => Zmage.browsing({ src: contentData.articleImageUrl1 })}
                                    style={{ backgroundImage: `url( ${contentData.articleImageUrl1} )` }}
                                >
                                </div> : null
                            }
                            {contentData.articleImageUrl2 !== '' ?
                                <div className='content-imgs-item'
                                    onClick={() => Zmage.browsing({ src: contentData.articleImageUrl2 })}
                                    style={{ backgroundImage: `url( ${contentData.articleImageUrl2} )` }}

                                >
                                </div> : null
                            }
                            {contentData.articleImageUrl3 !== '' ?
                                <div className='content-imgs-item'
                                    onClick={() => Zmage.browsing({ src: contentData.articleImageUrl3 })}
                                    style={{ backgroundImage: `url( ${contentData.articleImageUrl3} )` }}
                                >
                                </div> : null
                            }
                        </div>
                    </Card.Body>
                    <Card.Footer content={dateMsg} extra={<div>{contentData.sortEssayName}</div>} />
                </Card>
                
                <List  >
                    <List.Item >
                        <ContentFooter data = {contentData}></ContentFooter>
                    </List.Item>
                </List>

            </div>
        )
    }
}
